<template>
	<div class="quick">
		<template v-if="!isShowResult">
			<!-- 顶部 -->
			<div class="quick-top">
				<QuickTop
				ref="tabValueRef"
				:coin="footData.coin" :use-coin="footData.useCoin" @change="changeMade" @changeCoin="changeCoin"
				@place-order="getPlaceOrder"></QuickTop>
			</div>
			<!-- 底部 -->
			<QuickBottom :coin="footData.coin" :use-coin="footData.useCoin" :list="footData.list" :made="footData.made">
			</QuickBottom>
		</template>
		<template v-else>
			<div class="quick-top">
				<PayResult v-if="getPayResult == 'pay'"></PayResult>
				<SellResult v-if="getPayResult == 'sell'"></SellResult>
			</div>
		</template>
	</div>
</template>
<script lang="ts" setup>
import QuickTop from './components/QuickTop.vue'
import QuickBottom from './components/QuickBottom.vue';
import PayResult from './components/PayResult.vue';
import SellResult from './components/SellResult.vue'

// 控制显示
const isShowResult = ref<boolean>(false);

const tabValueRef = ref<any>(null);

// 底部数据
const setPayFootData = (coin: any, getCoin: any) => {
	const result: any = {
		coin: getCoin,
		useCoin: coin,
		made: 'pay',
		list: [
			{
				icon: '/transaction/c2c/quick/step-1.svg',
				step: `快速匹配 ${getCoin} 最优价格之选`,
				content: `选择 ${coin} 和 ${getCoin}，并输入金额。C2C 快捷交易将自动匹配价格最优的委托单。`
			},
			{
				icon: '/transaction/c2c/quick/step-2.svg',
				step: `使用 ${coin} 付款`,
				content: `选择您首选的 ${coin} 委托单，并在规定时 间内完成付款。`
			},
			{
				icon: '/transaction/c2c/quick/step-3.svg',
				step: `接收 ${getCoin}`,
				content: `卖家确认收到付款后，您购买的${getCoin}将被转入您的账户。`
			}
		]
	}
	return result;
}

const setSellFootData = (coin: any, getCoin: any) => {
	const result: any = {
		coin: getCoin,
		useCoin: coin,
		made: 'sell',
		list: [
			{
				icon: '/transaction/c2c/quick/step-1.svg',
				step: `创建一个 ${getCoin} 卖币委托单`,
				content: `选择 ${getCoin} 和 ${coin}，并输入金额。我们将估算您可以收到的${getCoin}金额。`
			},
			{
				icon: '/transaction/c2c/quick/step-2.svg',
				step: '选择收款方式',
				content: `选择您首选的收款方式接收 ${getCoin}。`
			},
			{
				icon: '/transaction/c2c/quick/step-3.svg',
				step: `出售 ${coin} 并接收 ${getCoin}`,
				content: `买家完成付款后，您将在您的收款账户收到该笔 ${getCoin} 付款。`
			}
		]
	}
	return result;
}
// 底部展示数据
const footData = ref<any>();

const changeMade = (made: 'sell' | 'pay' = 'pay', coin: any='CNY', getCoin: any = 'BTC') => {
	console.log(made, coin, getCoin);
	if (made == 'sell') {
		footData.value = setSellFootData(coin, getCoin);
	} else {
		footData.value = setPayFootData(coin, getCoin);
	}
}
function changeCoin(coin: any, getCoin: any) {
	if (tabValueRef.value.tabValue == 'sell') {
		footData.value = setSellFootData(coin, getCoin);
	} else {
		footData.value = setPayFootData(coin, getCoin);
	}
}
// 控制显示购买结算页还是支付结算页面
const getPayResult = ref<'pay' | 'sell'>('pay');
// 点击下单支付按钮
const getPlaceOrder = (val: any) => {
	isShowResult.value = true;
	getPayResult.value = val;
}
changeMade();
</script>
<style lang="scss" scoped>
.quick {
	margin-bottom: 160px;

	.quick-top {
		margin: 30px 0 100px 0;
	}
}
</style>
